<template>
  <div class="ui_mygraden">
    <!-- 头部 -->
    <div class="header_box">
      <div class="header_box1">
        <span @click="back"><i class="iconfont icon-fanhui"></i></span>
        <span class="s1">我的等级</span>
        <span class="s2">经验值明细</span>
      </div>
      <!-- 环形进度条 -->
      <div class="progress">
        <van-circle
          v-model="currentRate"
          :rate="60"
          :speed="100"
          :clockwise="true"
          color="#f0592a"
          layer-color="#fff"
          :stroke-width="60"
          fill="#1b1b1b"
        />
        <div class="progress_text">
          <div class="progress_text1">经验值</div>
          <div class="progress_text2">430</div>
          <div class="progress_text3">/450</div>
        </div>
      </div>
      <!-- 等级LV1 -->
      <div class="dengji_box">
        <p class="dengji_lf"><i class="iconfont icon-dengji"></i></p>
        <p class="dengji_rf">LV1</p>
      </div>
      <!-- 徽章 -->
      <div class="huizhang_box">
        <div>
          <div class="huizhang1"><img src="../../asset/images/heitie@2x.png" alt=""></div>
          <div class="huizhang_text1">黑铁小白</div>
        </div>
        <div>
          <div class="huizhang2"><img src="../../asset/images/qingtong@3x.png" alt=""></div>
          <div class="huizhang_text2">青铜入门</div>
        </div>
        <div>
          <div class="huizhang3"><img src="../../asset/images/baiyin@3x.png" alt=""></div>
          <div class="huizhang_text3">白银进阶</div>
        </div> 
      </div>
      <!-- 徽章底部弧形 -->
      <div>
        <div class="huxian"><img src="../../asset/images/huxian@3x.png" alt=""></div>
      </div>
      <div>
        <div class="guang"><img src="../../asset/images/guang@3x.png" alt=""></div>
      </div>
    </div>
    <!-- 内容列表 -->
    <div class="content_box">
      <!-- 经验规则 -->
      <div class="content_box1">经验值规则</div>
      <!-- 表头 -->
      <div class="content_box2" :class="showlist?'':'active'">
        <div @click="showlf">增加经验</div>
        <div @click="showrf">扣减经验</div> 
      </div>
      <!-- 内容表格数据 -->
      <div class="content_box3">
        <!-- 增加经验数据 -->
        <table v-if="showlist==true">
          <thead>
            <th class="t1">升级方式</th>
            <th class="t2">获得积分</th>
            <th class="t3">上限</th>
          </thead>
          <tbody>
            <tr>
              <td>线上支付订单</td>
              <td>1</td>
              <td>10笔</td>
            </tr>
            <tr>
              <td>卖给回收点</td>
              <td>2</td>
              <td>2笔</td>
            </tr>
            <tr>
              <td>五星好评</td>
              <td>0.5</td>
              <td>10笔</td>
            </tr>
            <tr>
              <td>成功邀请好友</td>
              <td>1</td>
              <td></td>
            </tr>
            <tr>
              <td>新用户完成首单</td>
              <td>10</td>
              <td>仅第一次</td>
            </tr>
            <tr>
              <td>每日登陆APP</td>
              <td>0.5</td>
              <td>1次/天</td>
            </tr>
          </tbody>
        </table>
        <!-- 减少经验数据 -->
        <table v-else>
          <thead>
            <th>扣减方式</th>
            <th>减少分值</th>
          </thead>
          <tbody>
            <tr>
              <td>一星差评</td>
              <td>-5</td>
            </tr>
            <tr>
              <td>用户投诉</td>
              <td>-10</td>
            </tr>
            <tr>
              <td>超时接单</td>
              <td>-1</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 温馨提示 -->
    <div class="footer">
      <div>温馨提示</div>
      <p>1.若您的经验值数据异常，请反馈给客服，我们会给您尽快处理</p>
      <p>2.若依欺骗等不正当途径获取经验值，所有经验值将被清零处理</p>
      <p>3.蜂收部落对以上活动享有最终解释权。</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "mygraden",
  data() {
    return {
      currentRate: 0,
      showlist:true,
    };
  },
  methods:{
    back() {
      this.$router.go(-1);
    },
    showlf(){
      this.showlist=true;
    },
    showrf(){
      this.showlist=!this.showlist;
    }
  },
  computed: {}
};
</script>
<style lang="less">
.ui_mygraden {
  //头部
  .header_box {
    height: 676px;
    background: url("../../asset/images/mygraden@2x.png") no-repeat;
    background-size: 100%;
    .header_box1 {
      display: flex;
      justify-content: space-between;
      padding: 30px;
      color: #fff;
      text-align: center;
      .icon-fanhui {
        font-size: 30px;
      }
      .s1 {
        font-size: 36px;
        padding-left: 80px;
      }
      .s2 {
        font-size: 30px;
      }
    }
    // 环形进度条
    .progress {
      text-align: center;
      margin-top: 40px;
      .van-circle__layer {
        transform: rotate(-60deg);
      }
      .progress_text {
        position: relative;
        bottom: 180px;
        color: #fff;
        .progress_text1 {
          font-size: 22px;
        }
        .progress_text2 {
          font-size: 46px;
          line-height: 50px;
        }
        .progress_text3 {
          font-size: 30px;
        }
      }
    }
    // 等级LV1
    .dengji_box {
      display: flex;
      padding-left: 42%;
      position: relative;
      bottom: 200px;
      .dengji_lf {
        width: 42px;
        height: 42px;
        background: #f0592a;
        border-radius: 50px;
        text-align: center;
        line-height: 42px;
        z-index: 10;
        .icon-dengji {
          font-size: 30px;
          color: #fff;
        }
      }
      .dengji_rf {
        width: 120px;
        height: 38px;
        background: #f0592a;
        border-radius: 50px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        position: relative;
        right: 30px;
        top: 1px;
      }
    }
    // 徽章
    .huizhang_box {
      display: flex;
      justify-content: space-between;
      position: relative;
      bottom: 150px;
      z-index: 10;
      color: #fff;
      padding: 0 40px;
      font-size: 24px;
      .huizhang1 {
        width: 90px;
        height: 90px;
        margin-bottom: 10px;
      }
      .huizhang2 {
        width: 128px;
        height: 128px;
        margin-bottom: 10px;
      }
      .huizhang3 {
        width: 90px;
        height: 90px;
        margin-bottom: 10px;
      }
      .huizhang_text1 {
        transform: rotate(20deg);
        position: relative;
        right: 20px;
      }
      .huizhang_text2 {
        position: relative;
        right: 10px;
        font-size: 36px;
      }
      .huizhang_text3 {
        transform: rotate(-20deg);
        position: relative;
        left: 20px;
      }
    }
    // 徽章底部弧形
    .huxian {
      position: relative;
      bottom: 350px;
    }
    .guang {
      width: 160px;
      position: relative;
      bottom: 460px;
      left: 38%;
    }
  }
  //内容列表
  .content_box {
    padding: 50px 59px;
    //  经验规则
    .content_box1 {
      font-size: 36px;
      margin-bottom: 10px;
    }
    // 表头
    .content_box2 {
      width: 630px;
      height: 90px;
      font-size: 36px;
      background: url("../../asset/images/1@2x.png") no-repeat;
      background-size: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #fff;
      &.active{
        background: url("../../asset/images/13@2x.png") no-repeat;
        background-size: 100%;
      }
    }
    // 内容表格数据
    .content_box3 {
      width: 630px;
      background: #edb863;
      padding: 20px 14px;
      text-align: center;
      margin:0 auto;
        table {
          width: 602px;
          text-align: center;
          vertical-align: center;
          border-collapse: collapse;
          font-size: 28px;
          color: #333;
          th,
          td {
            border: 1px solid #d4d4d4;
            height: 80px;
          }
          thead {
            background: #e6e6e6;
          }
          tbody {
            background: #fff;
          }
        }
    }
  }
  // 温馨提示
  .footer{
    font-size:28px;
    padding-left:62px;
    color:#333;
    div{
      font-size:30px;
    }
    p{
      margin:0px;
      padding-right:60px;
    }
  }
}
</style>
